<template>
  <section id="market-overview">
    <!-- 主标题 -->
    <h2 class="market-title">一站式助力企业发展的云市场</h2>
    <div class="market-container">
      <!-- 左侧内容区域 -->
      <div class="market-left">
        <!-- 公司简介 -->
        <p class="market-intro">
          北京优易捷科技有限责任公司，致力于为中国企业提供高品质的互联网解决方案服务，服务能力覆盖全国。服务涵盖APP软件开发、网站建设、电商平台搭建、大数据平台搭建、以及行业解决方案服务。
        </p>

        <!-- 服务特点 -->
        <div class="market-features">
          <div class="feature-item">
            <img src="@/assets/home/icon1.png" alt="精选优质服务商" class="feature-icon">
            <span>精选优质服务商</span>
          </div>
          <div class="feature-item">
            <img src="@/assets/home/icon2.png" alt="官方检测保质" class="feature-icon">
            <span>官方检测保质</span>
          </div>
          <div class="feature-item">
            <img src="@/assets/home/icon3.png" alt="客服全程服务" class="feature-icon">
            <span>客服全程服务</span>
          </div>
          <div class="feature-item">
            <img src="@/assets/home/icon4.png" alt="退款售后无忧" class="feature-icon">
            <span>退款售后无忧</span>
          </div>
        </div>

        <!-- 立方体图形 -->
        <div class="cube-container">
          <div class="cube">
            <img
              width="100%"
              height="100%"
              src="@/assets/home/footer-section_1.png"
              alt=""
            />
          </div>
        </div>
      </div>

      <!-- 右侧服务图标区域 -->
      <div class="market-right">
        <div class="service-icons">
          <div class="service-icon">
            <div class="icon-box">
              <img
                style="max-width: 50px"
                src="@/assets/home/footer-section_2.png"
                alt="基础软件"
              />
              <span >基础软件</span>
            </div>
          </div>
          <div class="service-icon">
            <div class="icon-box">
              <img
                style="max-width: 50px"
                src="@/assets/home/footer_section_3.png"
                alt="大数据"
              />
              <span >大数据</span>
            </div>
          </div>
          <div class="service-icon">
            <div class="icon-box">
                <img
                style="max-width: 50px"
                src="@/assets/home/footer-section_4.png"
                alt="物联网"
              />
              <span>物联网</span>
            </div>
          </div>
          <div class="service-icon">
            <div class="icon-box">
                <img
                style="max-width: 50px"
                src="@/assets/home/footer_section_7.png"
                alt="可视化"
              />
              <span>可视化</span>
            </div>
          </div>
          <div class="service-icon">
            <div class="icon-box">
                <img
                style="max-width: 50px"
                src="@/assets/home/footer-section_6.png"
                alt="多元化"
              />
              <span>多元化</span>
            </div>
          </div>
          <div class="service-icon">
            <div class="icon-box">
                <img
                style="max-width: 50px"
                src="@/assets/home/footer_section_5.png"
                alt="智能"
              />
              <span>智能</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "ContactSection",
  data() {
    return {
      // 这里可以添加需要的数据
    };
  },
  methods: {
    // 这里可以添加需要的方法
  },
};
</script>

<style scoped>
/* 主容器样式 */
#market-overview {
  background-color: #ffffff;
  padding: 60px 0;
}

.market-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* 左侧内容区域 */
.market-left {
  padding-right: 90px;
  flex: 1;
  position: relative;
}

/* 主标题 */
.market-title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 60px;
  margin-top: 30px;
  letter-spacing: 1px;
}

/* 公司简介 */
.market-intro {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* 服务特点 */
.market-features {
  display: grid;
  grid-template-columns: 200px 1fr; /* 2列，宽度分别为100px、和剩余空间 */
  /* grid-template-rows: 100px 100px; 2行，每行100px高 */
  /* grid-template-columns: repeat(2, 1fr); */ /* 2列，平均分配空间 等价于 1fr 1fr 第一个参数 2：表示重复的次数（这里是创建 2 列） 第二个参数 1fr：表示每列的宽度单位（fr 是网格布局特有的弹性单位，代表可用空间的比例）*/
  /* grid-template-columns:150px 150px 1fr; */
  gap: 20px;
  margin-bottom: 40px;
  /* width: 80%; */
}

.feature-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.feature-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* 立方体图形 */
.cube-container {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 80px;
}

.cube {
  position: relative;
  width: 160px;
  height: 160px;
}

/* 右侧服务图标区域 */
.market-right {
  flex: 1;
}

.service-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-box {
  width: 118px;
  height: 123px;
  /* background-color: #f0f7ff; */
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset -16px 0px 10px 0px rgba(183, 212, 246, 0.15),inset 16px 0px 10px 0px rgba(183, 212, 246, 0.15),inset 0px 19px 10px 0px rgba(183, 212, 246, 0.15);
}

.icon-box img {
  margin-bottom: 8px;
}

.icon-box span {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .market-container {
    width: 90%;
  }
}

@media (max-width: 992px) {
  .market-container {
    flex-direction: column;
  }

  .service-icons {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .market-title {
    font-size: 28px;
  }

  .market-features {
    grid-template-columns: 1fr;
  }

  .service-icons {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
export default {
  name: "ContactSection",
  data() {
    return {
      form: {
        name: "",
        phone: "",
        email: "",
        message: "",
      },
    };
  },
  methods: {
    submitForm(formName) {
      console.log("登录成功");
      // 这里可以添加表单提交逻辑
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     this.$message.success("提交成功!");
      //     // 这里可以添加表单提交逻辑
      //   } else {
      //     this.$message.error("请填写完整信息!");
      //     return false;
      //   }
      // });
    },
  },
};
</script>

<style scoped>
/* 联系方式样式 */
.contact {
  padding: 80px 0;
}

.contact-content {
  display: flex;
  gap: 50px;
}

.contact-info {
  flex: 1;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.info-item i {
  font-size: 24px;
  color: #409eff;
  margin-right: 20px;
  margin-top: 5px;
}

.info-item h4 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.info-item p {
  font-size: 16px;
  color: #666;
}

.contact-form {
  flex: 1;
  background-color: #f5f7fa;
  padding: 30px;
  border-radius: 10px;
}
</style>
